<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">

      <template #handleUser="{ record }">
        <HandleUsersList :handleUser="record.handleUser" />
      </template>
      <template #subUserName="{ record }">
        <!-- {{ record.handleUser }} -->
        <div style="display: flex; align-items: center;">
          <img :src="record?.Avatar ? record.Avatar : ``"
            style="width: 35px;height: 35px; margin-right: 20px;" />
          <span>{{ record.subUserName }}</span>
        </div>

      </template>
      <template #recordState="{ record }">
        <span>
          <a-tag v-if="record.recordState == `1`" color="blue"> 进行中</a-tag>
          <a-tag v-if="record.recordState == `2`" color="yellow">正常完成</a-tag>
          <a-tag v-if="record.recordState == `3`" color="red">拒绝结束</a-tag>
          <!-- <a-tag v-if="record.recordState == `4`" color="yellow">已结束</a-tag> -->
        </span>

      </template>

      <template #action="{ record }">
        <TableAction :actions="getActions(record)" />
      </template>
    </BasicTable>
    <myCheckedDrawer @register="registerDrawer" @success="onCustmDrawerSuccess" />
    <!-- <unDoLisDetailDrawer @register="registerDetailDrawer" /> -->
    <ContractModal @register="registerModalDetail" :extendConfig="extendConfig" v-show="contentShow.label == '合同信息'" />
  </div>
</template>
<script lang="ts" setup>
import { computed, ref, onMounted } from 'vue';
import { ActionItem, BasicTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import { useDrawer } from '/@/components/Drawer';
import { columns, searchFormSchema } from './myChecked.data';
import { useMessage } from '/@/hooks/web/useMessage';
import { useListPage } from '/@/hooks/system/useListPage';
import myCheckedDrawer from './components/myCheckedDrawer.vue';
import HandleUsersList from '/@/components/property/HandleUsersList.vue';
import ContractModal from '/@/views/nss/lease/contract/components/ContractModal.vue';

import { getContractDetail, getExtendConfig } from '../../lease/contract/contract.api';
import { getFlowRecordList } from './myChecked.api';
import { getDictItemsByCode } from '/@/utils/dict';
const extendConfig = ref({});
/**
 * 获取拓展字段配置
 * 只加载一次
 */
async function setExtendedConfig() {
  extendConfig.value = await getExtendConfig();
  console.log('合同拓展字段配置', extendConfig.value);
}
setExtendedConfig();
const { createMessage } = useMessage();
const selectedRowKeys = ref([])
// 列表页面公共参数、方法
const { tableContext } = useListPage({
  designScope: 'position-template',
  tableProps: {
    api: getFlowRecordList,
    columns: columns,
    formConfig: {
      schemas: searchFormSchema,
    },
    rowKey: 'recordId',
    actionColumn: {
      width: 70,
      fixed: 'right',
    },
    rowSelection: {
      getCheckboxProps: (record) => ({
        disabled: true, // 设置禁用状态
      }),
    }
  },
});
/**
* 操作列定义
* @param record
*/
function getActions(record): ActionItem[] {
  return [
    {
      label: '流程详情',
      tooltip: '查看详细的流程信息',
      onClick: handleEdit.bind(null, record),
    },
    {
      label: '内容详情',
      tooltip: '审批相关的详细信息',
      onClick: handleDetail.bind(null, record),
    },

  ];
}
// 注册待我处理的table数据
const [registerTable, { reload, getDataSource }, { rowSelection }] = tableContext;
// onMounted(() => {
//   reload()
//   console.log('表格数据', getDataSource())
// })
//注册审批详情信息drawer
const [registerDrawer, { openDrawer, setDrawerProps }] = useDrawer();
// const [registerExtendDrawer, { openDrawer: openExtendDrawer, setDrawerProps: setExtendDrawerProps }] = useDrawer();
// 注册确认弹窗
const [registerModalJimport, { openModal: openModalJimport }] = useModal();
const [registerModalDetail, { openDrawer: openModalDetail }] = useDrawer();
//注册详情drawer
// const [registerDetailDrawer, { openDrawer: openDetailDrawer }] = useDrawer();
/**
* 新增事件
*/
function handleAdd() {
  openDrawer(true, {
    isUpdate: false,
  });
}
/**
* 处理审核事件
*/
function handleEdit(record) {
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}
const record = ref({})
const contentShow = ref({})
/**
* 处理详情事件
*/
function handleDetail(r) {
  const dictOptions = getDictItemsByCode('flow_business_type')
  console.log('字典', dictOptions);
  contentShow.value = dictOptions.find((i) => i.value == r.tableId)
  // 示例代码 后期可换成contractId
  // console.log('数据表Id', record.tableDataId);
  getContractDetail(r.tableDataId).then((res) => {
    record.value = res
    console.log('res', res);

  }).catch((err) => {
    console.log('err', err);
  }).finally(() => {
    openModalDetail(true, {
      record,
      isUpdate: true,
    });
  })
}
function onCustmDrawerSuccess() {
}
</script>
